import React, { useEffect } from 'react'
import style from './style.module.scss'
import { NavLink } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFolder, faHeart, faImage } from '@fortawesome/free-solid-svg-icons'
import $ from 'jquery'
import AvatarView from '../../AvatarView'
import { useRecoilState } from 'recoil'
import { UserTabsMock } from './mock'
import FollowBnt from '../../Button/FollowBtn'

interface UserTabsProps {
    userId: string
}

export default function UserTabs(props: UserTabsProps) {
    const [userTabs, setUserTabs] = useRecoilState(UserTabsMock)

    useEffect(() => {
        const banner = $('#userBanner')
        let start_scroll_top: number | undefined = 0
        $(document).on('scroll', () => {
            let end_scroll_top = $(document).scrollTop()
            if (end_scroll_top! > banner.outerHeight()!) {
                $(`.${style.container}`).addClass('fix')
                $(`.${style.blank}`).addClass('active')
                $(`.${style.right}`).addClass('active')
            }
            if (end_scroll_top! < banner.outerHeight()!) {
                $(`.${style.container}`).removeClass('fix')
                $(`.${style.blank}`).removeClass('active')
                $(`.${style.right}`).removeClass('active')
            }

            start_scroll_top = $(document).scrollTop()
        })
    }, [])

    return (
        <>
            <div className={style.container}>
                <div className={style.left}>
                    <NavLink to={'/user/photos/' + props.userId} className={style.item}>
                        <FontAwesomeIcon icon={faImage} className={style.icon} />
                        <span>图片</span>
                    </NavLink>
                    <NavLink to={'/user/like/' + props.userId} className={style.item}>
                        <FontAwesomeIcon icon={faHeart} className={style.icon} />
                        <span>喜欢</span>
                    </NavLink>
                    {/*<NavLink to={'/user/collections/' + props.userId} className={style.item}>*/}
                    {/*    <FontAwesomeIcon icon={faFolder} className={style.icon} />*/}
                    {/*    <span>收藏夹</span>*/}
                    {/*</NavLink>*/}
                </div>
                <div className={style.right}>
                    <AvatarView width={'24px'} height={'24px'} img={userTabs.img} />
                    <span>{userTabs.userName}</span>
                    <FollowBnt width={'42px'} height={'32px'} userId={props.userId} />
                </div>
            </div>
            <div className={style.blank} />
        </>
    )
}
